<template>
  <!-- 附表4 车辆分类整月记录表新增 -->

  <div class="tb">
    <mt-field label="车牌号:" placeholder="请输入" type="text" :readonly="true" v-model="vehicleNo"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="plateColorCode"></mt-field>
    <mt-field label="经营模式:" placeholder="请输入" type="text" v-model="fzdcbfd42019001"></mt-field>
    <mt-field label="车辆分类依据:" placeholder="请输入" type="text" v-model="fzdcbfd42019002"></mt-field>
    <mt-field label="车辆类别:" placeholder="请输入" type="text" v-model="fzdcbfd42019015"></mt-field>
    <mt-field label="车辆数(辆):" placeholder="请输入" type="number" v-model="fzdcbfd42019014"></mt-field>
    <mt-field label="趟次数(个):" placeholder="请输入" type="number" v-model="fzdcbfd42019003"></mt-field>
    <mt-field label="货运量(吨):" placeholder="请输入" type="number" v-model="fzdcbfd42019004"></mt-field>
    <mt-field label="货运周转量(吨公里):" placeholder="请输入" type="number" v-model="fzdcbfd42019005"></mt-field>
    <mt-field label="平均运距(公里):" placeholder="请输入" type="number" v-model="fzdcbfd42019006"></mt-field>
    <mt-field label="集装箱箱运量(TEU):" placeholder="请输入" type="number" v-model="fzdcbfd42019007"></mt-field>
    <mt-field
      label="货类1名称:"
      placeholder="请输入"
      type="text"
      :readonly="true"
      v-model="hlytags.name"
      @click.native.capture="choseHwzl('hlymc')"></mt-field>
    <mt-field label="货类1货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd42019009"></mt-field>
    <mt-field
      label="货类2名称:"
      placeholder="请输入"
      type="text"
      :readonly="true"
      v-model="hlertags.name"
      @click.native.capture="choseHwzl('hlermc')"></mt-field>
    <mt-field label="货类2货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd42019011"></mt-field>
    <mt-field
      label="货类3名称:"
      placeholder="请输入"
      type="text"
      :readonly="true"
      v-model="hlstags.name"
      @click.native.capture="choseHwzl('hlsmc')"></mt-field>
    <mt-field label="货类3货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd42019013"></mt-field>
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>{{message}}</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      vehicleNo:'',// 车牌号码
      plateColorCode:"",//车辆颜色
      recid: "",
      yhmlk: "",
      fzdcbfd42019001: "", // 经营模式
      fzdcbfd42019002: "", // 车辆分类依据
      fzdcbfd42019015: "", // 车辆类别
      fzdcbfd42019014: "", // 车辆数
      fzdcbfd42019003: "", // 趟次数
      fzdcbfd42019004: "", // 货运量
      fzdcbfd42019005: "", // 货运周转量
      fzdcbfd42019006: "", // 平均运距
      fzdcbfd42019007: "", // 将装箱箱运量
      fzdcbfd42019008: "", // 货类1名称
      fzdcbfd42019009: "", // 货类1货运量
      fzdcbfd42019010: "", // 货类2名称
      fzdcbfd42019011: "", // 货类2货运量
      fzdcbfd42019012: "", // 货类3名称
      fzdcbfd42019013: "", // 货类三货运量
      //
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      currentTags: {},
      hlytags:{},
      hlertags:{},
      hlstags:{},
      message: "",
      flag: "hlymc"
    };
  },
   watch: {
    // 监听货运量、平均运距和周转量 add by qzn 20190704

    // 监听货运周转量
    fzdcbfd42019005(newVal) {
      // 平均运距= 周转量/货运量
      this.fzdcbfd42019006 =
        parseFloat(newVal) / parseFloat(this.fzdcbfd42019004);
    },
    // 监听平均运距 
    fzdcbfd42019006(newVal) {
      // 周转量 = 平均运距*货运量
      this.fzdcbfd42019005 = parseFloat(this.fzdcbfd42019004) * newVal;
    }
  },
  created() {},
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.vehicleNo=userInfo.vehicleNo;
    this.plateColorCode=userInfo.plateColorCode;
  },
  methods: {
    // 校验条件
    check(){
      if(this.fzdcbfd42019014 == ''){
          Toast("车辆数不能为空！");
      } else if(this.fzdcbfd42019003 == ''){
          Toast("趟次数不能为空！");
      } else if(this.fzdcbfd42019004 == ''){
          Toast("货运量不能为空！");
      } else if(this.fzdcbfd42019005 == ''){
          Toast("货运周转量不能为空！");
      } else {
          this.commit();
      }
    },
    commit() {
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        let data = {};
        let fzdcbfd04 = {};
        (fzdcbfd04.recid = this.recid),
        (fzdcbfd04.yhmlk = userInfo.yhRecid),
        (fzdcbfd04.fzdcbfd42019001 = this.fzdcbfd42019001),
        (fzdcbfd04.fzdcbfd42019002 = this.fzdcbfd42019002),
        (fzdcbfd04.fzdcbfd42019015 = this.fzdcbfd42019015),
        (fzdcbfd04.fzdcbfd42019014 = this.fzdcbfd42019014),
        (fzdcbfd04.fzdcbfd42019003 = this.fzdcbfd42019003),
        (fzdcbfd04.fzdcbfd42019004 = this.fzdcbfd42019004),
        (fzdcbfd04.fzdcbfd42019005 = this.fzdcbfd42019005),
        (fzdcbfd04.fzdcbfd42019006 = this.fzdcbfd42019006),
        (fzdcbfd04.fzdcbfd42019007 = this.fzdcbfd42019007),
        (fzdcbfd04.fzdcbfd42019008 = this.fzdcbfd42019008),
        (fzdcbfd04.fzdcbfd42019009 = this.fzdcbfd42019009),
        (fzdcbfd04.fzdcbfd42019010 = this.fzdcbfd42019010),
        (fzdcbfd04.fzdcbfd42019011 = this.fzdcbfd42019011),
        (fzdcbfd04.fzdcbfd42019012 = this.fzdcbfd42019012),
        (fzdcbfd04.fzdcbfd42019013 = this.fzdcbfd42019013),
        (data.fzdcbfd04 = fzdcbfd04),
        (data.companyType = userInfo.companyType),
        (data.vehicleNo = userInfo.vehicleNo),
        (data.plateColorCode = userInfo.plateColorCode),
        //console.log(data)
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/sjAssit/saveFzdcbfd04ForSJ",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              if (result.data.status == "1000") {
                Toast("保存成功");
                //console.log(result);
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    // 选择货物种类
    choseHwzl(hwzl) {
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          switch (hwzl) {
            case "hlymc":
              this.message = "请选择货类1名称";
              this.flag = "hlymc";
              break;
            case "hlermc":
              this.message = "请选择货类2名称";
              this.flag = "hlermc";
              break;
            case "hlsmc":
              this.message = "请选择货类3名称";
              this.flag = "hlsmc";
              break;
          }
          this.slots[0].values = response.data.hwzl;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      switch (this.flag) {
        case "hlymc":
            this.hlytags = this.currentTags;
            this.fzdcbfd42019008 = this.currentTags.code
          break;
        case "hlermc":
            this.hlertags = this.currentTags;
            this.fzdcbfd42019010 = this.currentTags.code
          break;
        case "hlsmc":
            this.hlstags = this.currentTags;
            this.fzdcbfd42019012 = this.currentTags.code
          break;
      }
      this.popupVisible = false;
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>